<!-- 入学/毕业信息 -->
<template>
	<div>
		<div class="my-form-container" style="height:481px">
			<el-form ref="dataForm" :model="dataForm" :rules="rules" class="demo-ruleForm">
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">入学时间</div>
						<el-form-item  prop="beginDate">
							<div class="my-form-item-value">
								<el-date-picker type="date" v-model="dataForm.beginDate" class="inputWidth" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">高考省市</div>
						<el-form-item  prop="area">
							<div class="my-form-item-value">
								<el-select v-model="province" placeholder="请选择" class="width139 right10" @change="nextLas">
									<el-option v-for="item in city" :key="item.value" :label="item.label" :value="item.label"></el-option>
								</el-select>
								<el-select v-model="county" placeholder="请选择" class="width139" >
									<el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.label"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">前毕业院校</div>
						<el-form-item  prop="qbyyx">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.qbyyx"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">前毕业时间</div>
						<el-form-item  prop="qbysj">
							<div class="my-form-item-value">
								<el-date-picker type="date" v-model="dataForm.qbysj" class="inputWidth" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">入学方式</div>
						<el-form-item  prop="rxmode">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.rxmode" placeholder="请选择" class="inputWidth">
									<el-option v-for="item in ruxType" :key="item.dictValue" :label="item.dictValue" :value="item.dictKey"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学籍注册号</div>
						<el-form-item  prop="registerNumber">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.registerNumber"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">入学时的专业班次</div>
						<el-form-item  prop="enrolSpecialtyClassName">
							<div class="my-form-item-value" v-if="dataForm.xyAdmissionGraduationInfo">
								<el-input class="inputWidth" v-model="dataForm.xyAdmissionGraduationInfo.enrolSpecialtyClassName"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">入学时所在单位</div>
						<el-form-item  prop="enrolUnit">
							<div class="my-form-item-value" v-if="dataForm.xyAdmissionGraduationInfo">
								<el-input class="inputWidth" v-model="dataForm.xyAdmissionGraduationInfo.enrolUnit"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">毕结业</div>
						<el-form-item  prop="graduatiion">
							<div class="my-form-item-value">
								<el-select v-model="dataForm.graduatiion" placeholder="请选择" class="inputWidth">
									<el-option label="毕业" value="毕业"></el-option>
									<el-option label="结业" value="结业"></el-option>
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">毕结业时间</div>
						<el-form-item  prop="graduatiionTime">
							<div class="my-form-item-value">
								<el-date-picker type="date" v-model="dataForm.graduatiionTime" class="inputWidth" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">学历证书编号</div>
						<el-form-item  prop="eduCertificateNo">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.xlzsbh"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学历证书专业</div>
						<el-form-item  prop="majorName">
							<div class="my-form-item-value" v-if="dataForm.xyAdmissionGraduationInfo" >
								<el-input class="inputWidth" v-model="dataForm.xyAdmissionGraduationInfo.xlzsSpecialty"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item">
					<el-col :span="12">
						<div class="my-form-item-label">学位证书编号</div>
						<el-form-item  prop="degCertificateNo">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.degCertificateNo"></el-input>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<div class="my-form-item-label">学位名称</div>
						<el-form-item  prop="xlzsSpecialty">
							<div class="my-form-item-value">
								<el-input class="inputWidth" v-model="dataForm.degree"></el-input>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="my-form-item" style="border:none">
					<el-col :span="24">
						<div class="my-form-item-label">授位时间</div>
						<el-form-item  prop="givenDegreeTime" v-if="dataForm.xyAdmissionGraduationInfo">
							<div class="my-form-item-value">
								<el-date-picker type="date" v-model="dataForm.xyAdmissionGraduationInfo.givenDegreeTime" class="inputWidth" value-format="yyyy-MM-dd"></el-date-picker>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<p class="notice">注：每页填写后要单独保存，否则数据会丢失</p>
		<div class="button-group">
			<div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
		<el-dialog title="提示" :visible.sync="noticeDialog" width="983px" :closeOnClickModal="false">
			<div class="message-container">
				<p class="dialogNotice">您当前页面还有未保存信息,请先保存!</p>
				<span slot="footer" class="dialog-footer">
					<button @click="continueJump">继续跳转</button>
					<button @click="noticeDialog = false">返回保存</button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {addStudentRX} from "@/api/student";
import {city }from "@/util/city"
  export default {
		data(){
		  return {
			province:'',
			county:'',
			// dataForm:{
				// beginDate:'',//入学时间
				// qbyyx:'',//前毕业院校
				// qbysj:'',//前毕业时间
				// gkcountry:'',//高考省市
				// city:'',
				// area:'',
				// rxmode:'',//入学方式
				// registerNumber:'',//学籍注册
				// enrolSpecialtyClassName:'',//入学时的专业班次
				// enrolUnit:'',//入学时所在单位
				// graduatiion:'',//毕结业
				// graduatiionTime:'',//毕结业时间
				// eduCertificateNo:'',//学历证书编号
				// majorName:'',//学历证专业
				// degCertificateNo:'',//学位证书编号
				// xlzsSpecialty:'',//学位证书专业
				// givenDegreeTime:''//授位时间
			// },
			area:[],//区
			ruxType:[],
			city:city,
			noticeDialog:false,
			rules: {
				beginDate: [
					{ required: true, message: '选择入学时间', trigger: 'blur' }
				],
				county: [
					{ required: true, message: '请选择高考省市', trigger: 'change' }
				],
				rxmode: [
					{ required: true, message: '请选择入学方式', trigger: 'change' }
				],
				registerNumber: [
					{ required: true, message: '请填写学籍注册号', trigger: 'blur' }
				],
            },
          }
		},
		props: {
			dataForm: {
				type: Object,
				default:()=>{}
			},
		},
		watch:{
			dataForm(val){
				this.province = val.gkcountry.split(',')[0];
				this.county = val.gkcountry.split(',')[1];
			}
		},
		mounted(){
			this.commonApi.getCommonData({code:'rxmodeCode'}).then(res=>{
                this.ruxType = res.data
            })
		},
        methods: {
			nextLas(e){
				this.county = ''
				this.area = city.filter(item=>item.label == e)[0].children;
				
			},
			cancel(){
				this.noticeDialog = true;
			},
			continueJump(){
				this.noticeDialog = false;
				this.$emit('continueJump')
			},
			save(){
				this.$refs['dataForm'].validate(async(valid) => {
                    if (valid) {
						let params = {
							studentCode:this.$route.query.studentCode,
							gkcountry:this.province+','+this.county,
							qbyyx:this.dataForm.qbyyx,
							degree:this.dataForm.degree,
							degCertificateNo:this.dataForm.degCertificateNo,
							xlzsbh:this.dataForm.xlzsbh,
							...this.dataForm.xyAdmissionGraduationInfo
						}
                        let res = await addStudentRX(params);
                        if(res.code == 200){
                            this.$message.success({message: '添加成功',type: 'success'});
							this.$emit('saveSecond')
                        }else{
                            this.$message.error(res.msg);
                        }
                    } 
                });
			}
        }
  };
</script>
<style scoped lang="less">
@import "../../../../styles/commonCss.less";
	.dialogNotice{
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 20px;
		color: #004CA7;
		text-align: center;
		margin: 68px 0 92px 0;
	}
	.right10{
		margin-right: 10px;
	}
	/deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
	.width139{width: 139px;}
	.dialog-footer{
		display: flex;
		justify-content: center;
		margin-bottom: 100px;
		button{
			width: 114px;
			height: 36px;
			border-radius: 6px;
			&:nth-child(1) {
				background: #FFF6EF;
				border: 1px solid #F3B815;	
				color: #F3B815;
				margin-right: 96px;			
			}
			&:nth-child(2) {
				background: #F1FFF8;
				border: 1px solid #02C86C;
				color: #02C86C;
			}
		}
	}
	.notice{
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 0px;
		color: #FF3819;
	}
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 184px;}
</style>